<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../../css/wx/mui.min.css">
    <link rel="stylesheet" href="../../../css/wx/app.css">
    <link rel="stylesheet" href="../../../css/wx/style.css"/>

    <script type="text/javascript">
        var pageConfig = {
            jss: ["app/hn-bfjltb/goods-info"]
        };
    </script>
    <script data-main="../../../js/wx/public/config.js" src="../../../js/require.js"></script>

    <style>
        .goodModal .goodsImg {
            width: 20%;
            margin-top: -30px;
            margin-bottom: 15px;
        }

        .goodModal .goodsImg img {
            max-width: 100%;
            border-radius: 4px;
        }

        .lists_tips span {
            display: inline-block;
            padding: 1px 6px;
            border: 1px solid #dadada;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 10px;
        }

        .goodModal p {
            color: #333;
            margin-bottom: 6px;
        }

        .goodModal .addressBtn button {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0;
            font-size: 16px;
            letter-spacing: 2px;
            background: #FF7100;
            border: none;
        }

        .chooseBtn {
            padding: 1px 6px;
            border: 1px solid #005768;
            border-radius: 4px;
            font-size: 15px;
            color: #005768;
            margin-left: 10px;
        }

        .mui-slider-item {
            border: none !important;
        }

        .navbar-mui button {
            border: none;
        }

        .textmar .goodsinfo p span {
            color: #000;
        }

        .mui-table-view {
            background: none;
        }

        #item2mobile {
            background: #fff;
        }

        .goodsInfo .mui-slider-indicator .mui-scroll {
            width: 100%;
            background-color: #273A60;
            display: flex;
            justify-content: space-between;
            padding: 0 70px;
        }

        .goodsInfo .mui-slider-indicator .mui-scroll a {
            width: 100%;
            display: block;
            padding: 0;
        }

        .goodsInfo .mui-slider-group .mui-slider-item {
            margin-top: 0;
        }

        .goodsInfo .mui-slider-group .mui-slider-item a {
            transform: translateY(0);
            -webkit-transform: translateY(0);
        }

        .goodsInfo .mui-segmented-control.mui-segmented-control-inverted .mui-control-item, .mui-action-back {
            color: #000;
        }

        .goodsInfo .mui-slider-indicator .mui-scroll {
            background-color: #fff
        }

        .flex-content-center .mui-checkbox {
            height: auto;
            width: auto;
        }

        .mui-input-row label {
            padding-right: 2px;
        }

        .mui-numbox {
            width: 140px;
        }

    </style>
</head>

<body>

<div class="mui-content mui-fullscreen goodsInfo wf-listGoods flex-container-v">
    <div class="flex-content-center">
        <div id="slider" class="mui-slider mui-fullscreen">
            <div id="sliderSegmentedControl"
                 class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <a class="mui-control-item mui-active" href="#item1mobile">
                        商品
                    </a>
                    <a class="mui-control-item" href="#item2mobile">
                        详情
                    </a>
                    <a class="mui-control-item" href="#item3mobile">
                        评价
                    </a>
                </div>
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
            </div>
            <div class="mui-slider-group" id="mui-slider-group">
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                    <div id="scroll1" class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <div class="mui-table-view">
                                <div class="mui-slider">
                                    <div class="mui-slider-group mui-slider-loop">
                                        <div class="mui-slider-item" style="text-align: center;">
                                            <img :src="upd.GWAM015 | goodsImgsUtils" style="height: 250px;width:auto"/>
                                            <!--<img src="../../static/img/goods-hn.png" style="height: 250px;width:auto"/>-->
                                        </div>
                                    </div>
                                </div>
                                <div class="text-mui textmar boxShow" style="background: #fff;margin: 0;">
                                    <div class="goodsinfo">
                                        <h4>{{item.GWAML003}}</h4>
                                        <div style="display: flex;justify-content: space-between;">
                                            <p class="mui-ellipsis wf-sfont-color">￥{{upd.GWAP100 |
                                                priceFMT}}<span>/{{upd.GWAM008|goodsUnits}}</span></p>
                                            <div class="mui-numbox">
                                                <button @tap.stop="minus(upd)" class="mui-btn mui-numbox-btn-minus"
                                                        type="button">-
                                                </button>
                                                <input v-model="upd.GWCM003" class="mui-numbox-input" type="number"/>
                                                <button @tap.stop="plus(upd)" class="mui-btn mui-numbox-btn-plus"
                                                        type="button">+
                                                </button>
                                            </div>
                                        </div>
                                        <p id="characteristics" v-for="val in characteristics">
                                            {{val.GWAIL003}}：
                                            <a v-for="val1 in val.child" href="javascript:;"
                                               :class="val.selectVal==val1.GWAJ002?'chooseBtn':''"
                                               @tap="characterChange(val,val1)">{{val1.GWAJL004}}</a>
                                        </p>
                                    </div>
                                </div>
                                <!--新加-->
                                <form class="mui-input-group" style="margin-bottom: 10px;margin-top: 10px;">
                                    <div class="mui-input-row">
                                        <label>实际价格(元)：</label>
                                        <input v-model="upd.GWAP100_1" type="number" class="mui-input-clear">
                                    </div>
                                    <div class="mui-input-row">
                                        <label>预计购买日期：</label>
                                        <input v-model="upd.GWBK008" type="date" class="mui-input-clear">
                                    </div>
                                    <div class="mui-input-row">
                                        <label>预计回款日期：</label>
                                        <input v-model="upd.GWBK009" type="date" class="mui-input-clear">
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
                <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <div id="scroll2" class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <div class="wf-infoTab">
                                <ul>
                                    <li class="active">商品介绍</li>
                                    <li>规格参数</li>
                                    <li>包装售后</li>
                                </ul>
                                <div class="tabCont">
                                    <div class="group">
                                        <p>{{GWAM016}}</p>
                                    </div>
                                    <div class="group" style="display: none">
                                        <table cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td width="50%">商品编号</td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td width="50%">规格</td>
                                                <td>{{GWAM017}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="group" style="display: none">
                                        <!--<p>-->
                                        <!--<button class="wf-updlown">供货清单下载</button>-->
                                        <!--</p>-->
                                        <p><a href="../../files/004.pdf" class="wf-updlown">供货清单下载</a></p>
                                        <p></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="item3mobile" class="mui-slider-item mui-control-content wf-classes-info">
                    <div id="scroll3" class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <div class="mui-input-row mui-checkbox mui-left flexl">
                                <label class="hide">只看当前商品</label>
                                <input
                                        @change="statusChange"
                                        v-model="others.status"
                                        true-value="1" :false-value="0"
                                        class="hide"
                                        type="checkbox">
                                <p style="flex: 50%;font-size: 14px;line-height: 37px;text-align: right;padding-right: 10px;">
                                    好评度{{others.pv}}%</p>
                            </div>

                            <div class="wf-evaluate-user">
                                <div class="wf-evaluate">
                                    <p :class="others.key==0?'active':''" @tap.stop="getpj(0)" id="all">
                                        全部{{others.count}}</p>
                                    <p :class="others.key==1?'active':''" @tap.stop="getpj(1)" id="good">
                                        好评{{others.count1}}</p>
                                    <p :class="others.key==2?'active':''" @tap.stop="getpj(2)" id="medium">
                                        中评{{others.count2}}</p>
                                    <p :class="others.key==3?'active':''" @tap.stop="getpj(3)" id="bad">
                                        差评{{others.count3}}</p>
                                </div>
                                <h4 class="title" style="padding: 12px 15px;">评价</h4>
                                <commentsitem :model="items"></commentsitem>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="btnSave1Div" style="width: 100%;height: 58px;display: none;" >
        <button type="button" class="mui-btn mui-btn-royal mui-btn-block mui-btn-outlined addCar" id="btnSave1">
            确定
        </button>
    </div>
</div>

<script id="comments-template" type="text/x-template">
    <div>
        <div v-for="val in model" class="wf-talk-lists">

            <div class="wf-evaluate-listH">
                <p>{{val.GWCW009}}</p>
                <div class="wf-list-user">
                    <span class="icons ri">
					<i data-index="1"
                       :class="'mui-icon '+ (val.GWCW005>=1?'mui-icon-star-filled':'mui-icon-star')"></i>
					<i data-index="2"
                       :class="'mui-icon '+ (val.GWCW005>=2?'mui-icon-star-filled':'mui-icon-star')"></i>
					<i data-index="3"
                       :class="'mui-icon '+ (val.GWCW005>=3?'mui-icon-star-filled':'mui-icon-star')"></i>
                    <i data-index="4"
                       :class="'mui-icon '+ (val.GWCW005>=4?'mui-icon-star-filled':'mui-icon-star')"></i>
                    <i data-index="5"
                       :class="'mui-icon '+ (val.GWCW005>=5?'mui-icon-star-filled':'mui-icon-star')"></i>
				</span>
                </div>
                <p>{{val.GWCWDOCDATE}}</p>
            </div>
            <div class="wf-evaluate-listB">
                <p>{{val.GWCW006}}</p>
            </div>
        </div>
    </div>
</script>
</body>

</html>